<template>
  <!-- 附表4：“质量工匠之星”亮点做法及表彰公示 -->
  <a-spin :spinning="loading">
    <title-name :title="`${$route.query.month}月“质量工匠之星”亮点做法及表彰公示`"></title-name>
    <!-- 列表 -->
    <Empty v-if="!Object.keys(list) || !Object.keys(list).length" description="暂无数据" />
    <div v-for="(item, index) in list" :key="index">
      <div class="branchName">{{ index }}</div>
      <div>
        <a-table rowKey="id" bordered :pagination="false" :columns="columns" :dataSource="item"> </a-table>
      </div>
    </div>
  </a-spin>
</template>

<script>
import { getStarCommend } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示

export default {
  name: 'CraftsmanStar',
  components: {
    Empty
  },
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      loading: false, // 加载控件
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          align: 'center',
          customRender() {
            return arguments[1].type ? arguments[2] + 1 : ''
          }
        },
        {
          title: '项目名称',
          width: 200,
          dataIndex: 'projectName'
        },
        {
          title: '表彰公示照片',
          dataIndex: 'fileVOS',
          width: 200,
          customRender: (text) => {
            return text?.[0] ? <l-table disabled={true} uploadType="image" uploadArrys={text} /> : ''
          }
        },
        {
          title: '亮点做法描述',
          dataIndex: 'commendDesc'
        }
      ],
      list: {} // 列表
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求列表
      getStarCommend(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            this.list = res.data || {}
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>